<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>数码类型</title>

	<link rel="shortcut icon" type="image/x-icon" href="../image/logo.png" />
	<link rel="stylesheet"  type="text/css" href="../layui/css/layui.css" />
	<link rel="stylesheet " type="text/css" href="../css/index.css" />
</head>
<body>
<div class="digital">
	<!-- 头部 -->
	<div class="head">
		<div class="head-x ">
			<div class="head-x-css">
						<span class="layui-breadcrumb" lay-separator="|">
						 <a id="login_state" href="login.html">您好，请登录</a>
						  <a href="register.html">免费注册</a>
						  <a href="#">帮助中心</a>
						  <a href="#">客服</a>

						</span>

			</div>
		</div>
		<!-- 搜索框 -->
		<div class="head-s">
			<ul class="head-s-css">

				<li class="css-logo"><img src="../image/logo.png"/></li>
				<li class="css-text">
					<ul class="text-ul1">
						<li class="text"><input  id="content" type="text" name="title"   placeholder=" 请输入搜索内容"  class="text-input"/> </li>
						<li class="text-s">  <a  id="select"  class="text-btn" href="javascript:void(0)"  ><img src="../image/搜索.png"/></a>  </li>

					</ul>



					<ul class="layui-tab-title">
						<li class="layui-this"><a href="index.html"> 首页</a></li>
						<li><a  href="type.html#电脑整机"  id="typename01" > 手机款式</a></li>
						<li><a    href="type.html#电脑整机" id="typename02"> 电脑整机</a></li>
						<li><a    href="type.html#家电类型" id="typename03"> 家电类型</a></li>
						<li><a    href="type.html#影音娱乐" id="typename04"> 影音娱乐</a></li>
						<li><a    href="type.html#摄影摄像" id="typename05"> 摄影摄像</a></li>
					</ul>
				</li>
				<!--头像-->
				<li class="css-touxiang"><a href="#"> <img id="touxiang" src="../image/个人中心.png"/>
					<p>个人中心</p>
				</a></li>

				<!-- 购物车 -->
				<li class="css-vehicle">
					<div class="vehicle-img"><a href="#"> <img src="../image/购物车.png"/> </a></div>
					<div  class="vehicle-text"> <span><a href="ShoppingCart.html">   我的购物车    </a></span></div>
				</li>


			</ul>

		</div>


	</div>




	<!-- 主体 -->
	<div class="main">
		<div class="layui-fluid">
			<fieldset class="layui-elem-field layui-field-title">
				<legend>猜你喜欢</legend>
			</fieldset>
			<div class="layui-row" id="yc-movies">
				<div class="layui-col-md3">
					<div class="grid-demo ">
						<div class="article-text">
							<a href="#"><img class="ppics" src="../image/lunbo02.png"/></a>
							<p class="fname">中国减贫</p>
							<p class="score">9.0</p>
						</div>
					</div>
				</div>












			</div>
		</div>

		<!--分页标签-->
		<div id="demo7"></div>
	</div>


	<!-- 尾部 -->
	<div class="footer">

		<p>商务合作邮箱：v@maoyan.com 客服电话：10105335
			违法和不良信息/涉未成年人有害信息举报电话：4006018900</p>

		<p>用户举报/涉未成年人有害信息举报邮箱：tousujubao@meituan.com
			舞弊线索举报邮箱：wubijubao@maoyan.com</p>

		<p>中华人民共和国增值电信业务经营许可证 京B2-20190350 营业性演出许可证
			京演（机构）（2019）4094号 </p>
	</div>

</div>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script src="../layui/layui.js"></script>
<script>

	layui.use('carousel', function(){
		var carousel = layui.carousel
				,laypage = layui.laypage
				,$ = layui.jquery;
		//建造实例
		carousel.render({
			elem: '#test1'
			,width: '100%' //设置容器宽度
			,arrow: 'always' //始终显示箭头
			//,anim: 'updown' //切换动画方式
		});

		let limit =24;
		let count = 0;
		let flag = false;//表示是否为第一次查询商品数据




		let path = window.location.hash;
		//地址必须是detail.html#3
		if(path.indexOf("#") < 0){
			//地址不正确 跳转到电影页面
			window.location.href = 'index.html';
		}

		let type =decodeURI( path.substring(1));//获取type



		//检测是否登录
		lg();

		//显示商品信息
		finds(type,1,limit);





		function finds(type,curr,limit) {
			$.get("../type",{op:"finds",type:type,page:curr,limit:limit},function (rs) {
				if(rs.code ==200){
					showMovies(rs.data);
					count = rs.count;
					//首次访问 显示分页组件
					if(flag == false){
						showPage();
					}
					flag=true;
				}
				else{
					layer.msg(rs.msg);
					$("#yc-movies").html('');
				}
			},"json");

		}

		function showMovies(arr) {


			let str = '';
			for(let i=0;i<arr.length;i++){
				str += '<div class="layui-col-md3">'+
						'<div class="grid-demo">' +
						'<div class="article-text"  >'+
						'<a href=" ProdDetail.html#'+arr[i].pId+'"><img class="ppics" style="height:280px; " src="'+ arr[i].pImage +'"/></a>'+
						'<a href=" ProdDetail.html#'+arr[i].pId+'"><p class="name" style="line-height: 40px;">'+arr[i].pName+'</p></a>'+

						'</div>'+
						'</div>'+
						'</div>'

			}
			$("#yc-movies").html(str);


		}




		//检测是否登录
		function lg() {


			//session里存储   uId
			$.get("../user",{op:"determine" },function (rs) {

				if(rs !=null){

					$("#login_state").text("在线！"); // 修改文本

				}

			},"json");


		}




		//分页
		function showPage() {
			//完整功能
			laypage.render({
				elem: 'demo7'
				,count: count
				,limit:limit
				,limits:[10,15,20,25,30]
				,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
				,jump: function(obj){
					if(flag ==true){ //不是第一次查询电影数据  调用finds()
						finds(obj.curr,obj.limit);
					}
				}
			});


		}



		$("#typename01").click(function () {
			//检测是否登录
			lg();

			let text = document.getElementById("typename01").innerText;


			//显示商品信息
			finds(text,1,limit);


		});

		$("#typename02").click(function () {
			//检测是否登录
			lg();

			let text = document.getElementById("typename02").innerText;


			//显示商品信息
			finds(text,1,limit);


		});

		$("#typename03").click(function () {
			//检测是否登录
			lg();

			let text = document.getElementById("typename03").innerText;


			//显示商品信息
			finds(text,1,limit);


		});


		$("#typename04").click(function () {
			//检测是否登录
			lg();

			let text = document.getElementById("typename04").innerText;


			//显示商品信息
			finds(text,1,limit);


		});


		$("#typename05").click(function () {
			//检测是否登录
			lg();

			let text = document.getElementById("typename05").innerText;


			//显示商品信息
			finds(text,1,limit);


		});



		$("#select").click(function () {

			let pName = $("#content").val();
			if( pName!=null && ""!=pName){

				//session里存储   pName
				$.get("../prodDetails",{op:"cpName",pName:pName },function (rs) {


					if(rs!=null){
						window.location.href = 'index.html';
					}


				},"json");


			}
			else{

				alert('暂无相关商品！！！');
			}


		});



		//跳转用户个人信息页面
		$("#touxiang").click(function () {

			window.location.href = 'personal.html';

		});






	});















</script>

</html>
